<template>
	<view class="content">
		<view class="time">
			<text>距离报价截止时间还剩</text>
			<uni-countdown :day="residue.day" :hour="residue.hours" :minute="residue.minutes" :second="residue.minutes"
				:font-size="24" @timeup="timeEnd"></uni-countdown>
		</view>
		<view class="item">
			<view class="code iconbox">
				询价信息<view class="icon iconfont icon-guanyu"></view>
			</view>
			<view v-for="item in info.goods">
				<view class="list">
					<text class="name">车辆类型</text>
					<text>{{cartype[item.vehicle_model-1]}}</text>
				</view>
				<view class="list">
					<text class="name">商品名称</text>
					<text>{{item.spu_name}}</text>
				</view>
				<view class="list">
					<text class="name">总数量</text>
					<text>{{(item.quantity*1).toFixed(4)}}</text>
				</view>
				<view class="list">
					<text class="name">运输单价</text>
					<input type="text" placeholder="请输入" placeholder-class="input-style" class="ipt"
						v-model="item.freight_price" />
				</view>
				<view class="list">
					<text class="name">总金额</text>
					<view class="sum">{{(item.total_purchase_price=(item.quantity*item.freight_price))}}</view>
				</view>
			</view>
			<view class="list">
				<text class="name">发货人</text>
				<text>{{info.consignee}}</text>
			</view>
			<view class="list">
				<text class="name">发货电话</text>
				<text>{{info.consignee_phone}}</text>
			</view>
			<view class="list">
				<text class="name">发货地址</text>
				<text>{{info.shipper_address}}</text>
			</view>
			<view class="list">
				<text class="name">收货人</text>
				<text>{{info.shipper}}</text>
			</view>
			<view class="list">
				<text class="name">收货电话</text>
				<text>{{info.shipper_phone}}</text>
			</view>
			<view class="list">
				<text class="name">收货地址</text>
				<text>{{info.consignee_address}}</text>
			</view>
		</view>

		<view class="imgbox">
			<view class="title">
				<text>请选择报价文件</text>
				<view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="file" v-for="(item,index) in fileUrl" :key='index'>
				<view class="url">{{item}}</view>
				<button class="btn" @tap="openurl(item)">查看</button>
				<button class="btn" @tap="del(index)">删除</button>
			</view>
			<view class="upload">
				<view class="img">
					<uni-icons type="plusempty" size="60" color="#f7f7f7" @tap="choosefile()"></uni-icons>
				</view>
			</view>
		</view>

		<view class="btnbox">
			<button class="btn" @tap="submit">提交</button>
			<navigator class="btn back" open-type="navigateBack">返回</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		supplierOffer,
		inquiryInfo
	} from '../../network/inquiry.js';
	import uploadUrl from '../../network/utils.js';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	const goodsList = reactive([])
	const info = reactive({})
	onLoad((res) => {
		getDetail(res.id)
	})
	const cartype = reactive(['平板车', '高栏车', '高地板', '厢式车', '面包车', '冷藏车', '飞翼车', '自卸车', '爬梯车', '集装箱', '大件牵引车', '低栏车'])
	const getDetail = (id) => {
		let data = {
			enquiry_id: id
		}
		inquiryInfo(data).then(res => {
			Object.assign(info, res.data.data)
			info.goods.forEach((item,index)=> {
				item.freight_price = item.purchase_price
				if(info.offer_detail){
					item.freight_price = info.offer_detail[index].freight_price
				}
				item.goods_id = item.id
			})
			if(info.is_quoted){
				fileUrl.value = JSON.parse(info.offer.attachment)
			}
			countTime(info.quotation_exp_date)
		})
	}
	const residue = reactive({})
	const countTime = (time) => {
		var dateBegin = new Date();
		var dateEnd = new Date(time.replace(/-/g, "/"));
		var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
		var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
		var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
		var hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
		//计算相差分钟数
		var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
		var minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
		//计算相差秒数
		var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
		var seconds = Math.round(leave3 / 1000)
		residue.day = dayDiff
		residue.hours = hours
		residue.minutes = minutes
		residue.seconds = seconds
	}
	const checked = ref(0)
	const fileUrl = ref([])
	const choosefile = () => {
		// #ifdef  APP-PLUS
		let fileTypes = ["doc", "docx", "xls", "xlsx", "pdf", "txt", "pptx"]
		let chooseFile = plus.io.chooseFile({
			title: '选择文件',
			filetypes: fileTypes,
			multiple: false
		}, (e) => {
			uni.uploadFile({
				url: uploadUrl.uploadUrl,
				filePath: e.files[0],
				name: 'file',
				header: {
					'token': uni.getStorageSync('token')
				},
				formData: {
					file: e.files[0]
				},
				success(response) {
					let data = JSON.parse(response.data)
					fileUrl.value.push(data.data.fullurl)
				}
			})
		})
		// #endif

		// #ifndef  APP-PLUS	
		H5upload()
		//#endif
	}
	const H5upload = () => {
		uni.chooseFile({
			count: 1,
			complete(res) {
				uni.uploadFile({
					url: uploadUrl.uploadUrl,
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					formData: {
						file: res.tempFilePaths[0]
					},
					success(response) {
						let data = JSON.parse(response.data)
						fileUrl.value.push(data.data.fullurl)
					}
				})
			}
		})
	}
	const openurl = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif

		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
	const del = (index) => {
		fileUrl.value.splice(index, 1)
	}

	const timeEnd = () => {
		sumitDisable.vlaue = false
	}
	const sumitDisable = ref(false)
	const submit = () => {
		if (sumitDisable.value) {
			uni.showToast({
				title: '已到报价截止时间，无法报价',
				icon: 'none'
			})
			return
		}
		let unset = info.goods.filter(item => {
			return item.freight_price == ''
		})
		if (unset.length > 0) {
			uni.showToast({
				title: '请填写运输单价',
				icon: 'none'
			})
			return
		}
		if (fileUrl.value.length <= 0) {
			uni.showToast({
				title: '请上传报价文件',
				icon: 'none'
			})
			return
		}
		info.goods.forEach((item,index)=> {
			item.purchase_price = item.freight_price
		})
		uploadsign()
	}
	const uploadsign = () => {
		let data = {
			enquiry_id: info.id,
			attachment: fileUrl.value,
			goods: info.goods
		}
		supplierOffer(data).then(res => {
			uni.showToast({
				title: '报价成功'
			})
			setTimeout(() => {
				uni.switchTab({
					url: '../transport/transport'
				})
			}, 300)
		})
	}
</script>

<style lang="scss">
	.time {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;
			font-weight: bold;
		}

		.iconbox {
			justify-content: flex-start;
			gap: 10rpx;

			.icon {
				font-size: 40rpx;
				color: #ff6700;
				font-weight: normal;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;
			display: flex;
			align-items: center;
			gap: 50rpx;

			.name {
				display: inline-block;
				width: 140rpx;
				text-align: right;
			}

			.ipt {
				font-size: 28rpx;
				border: 2rpx solid #999;
				padding: 6rpx;
				border-radius: 6rpx;
				width: 300rpx;
			}

			.sum {
				font-size: 28rpx;
				border: 2rpx solid #999;
				padding: 6rpx;
				border-radius: 6rpx;
				width: 300rpx;
				height: 40rpx;
			}
		}

		.goodslist {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			padding-left: 10rpx;
			box-sizing: border-box;
			color: #333;
			display: flex;
			justify-content: space-between;
			position: relative;

			.name {
				width: 180rpx;
				text-align: right;
				text-align: center;
			}

			.icon {
				position: absolute;
				left: -20rpx;
			}
		}
	}

	.imgbox {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.upload {
			display: flex;
			justify-content: flex-start;

			.img {
				width: 30%;
				height: 220rpx;
				display: inline-block;
				border: 2rpx solid #f7f7f7;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}
		}

		.file {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;

			.url {
				width: 400rpx;
				font-size: 24rpx;
				color: #f6bf00;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.btn {
				width: 120rpx;
				height: 60rpx;
				font-size: 24rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f6bf00;
			}
		}

		.title {
			margin-bottom: 30rpx;
			font-size: 32rpx;
			display: flex;
			justify-content: flex-start;
			gap: 10rpx;
			font-weight: bold;

			.icon {
				font-size: 40rpx;
				color: #ff6700;
				font-weight: normal;
			}
		}
	}

	.btnbox {
		display: flex;
		justify-content: center;
		padding: 60rpx 0;
		gap: 30rpx;

		.btn {
			background-color: #f6bf00;
			padding: 0;
			color: #333;
			font-size: 28rpx;
			height: 60rpx;
			width: 200rpx;
			line-height: 60rpx;
			margin: 0;
		}

		.back {
			display: inline-block;
			background-color: #fff;
			text-align: center;
			border-radius: 10rpx;
		}
	}
</style>